<template>
	<div class="musicContent">
		<transition name="anni2" mode="out-in">
			<router-view name="songerMusic3"></router-view>
		</transition>
		<transition name="anni" mode="out-in">
			<router-view name="songerMusic2"></router-view>
		</transition>
		<transition name="anni2" mode="out-in">
			<router-view name="songerMusic"></router-view>
		</transition>
		<transition name="anni2" mode="out-in">
			<router-view name="seting"></router-view>
		</transition>
		<transition name="anni2" mode="out-in">
			<router-view name="musicSearch"></router-view>
		</transition>
		<transition name="anni" mode="out-in">
			<router-view name="playname"></router-view>
		</transition>
		<my-header></my-header>
		<transition name="fade" mode="out-in">
			<router-view></router-view>
		</transition>
		<my-footer></my-footer>
	</div>
</template>

<script>
	import myHeader from "./myHeader.vue";
	import myFooter from "./myFooter.vue";
	export default {
		name: "musicContent",
		data() {
			return {
				
			}
		},
		components: {
			myHeader,
			myFooter,
		},
	}
</script>

<style scoped lang="scss">
	.fade-enter-active,.fade-leave-active{
        transition: all .3s;
        transform-origin: 50% 10%;
    }
    .fade-enter,.fade-leave-to{
        opacity: 0;
        transform: translateX(100%);
    }
	.anni2-enter-active,.fade-leave-active{
		transition:all .3s;
	}

	.anni2-enter,.fade-leave-to{
		opacity: 0;
		transform: translateX(200%);
	}
    .anni-enter-active,
	.anni-leave-active {
		transition: all .3s ease-in-out;
	}
	
	.anni-enter,
	.anni-leave-to {
		opacity: 0;
		transform: translateY(100%);
	}
</style>